<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新时代摄影</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        html{height: 100%;margin: 0;}
        body{height: 100%;font-size: 12px;display: flex;margin: 0;flex-direction: column;}
        .header{min-width: 100%;flex: 0 0 auto;height: 90px;background-color: #2e2e2e}
        .warp{width: 1280px;height: 85px;margin:0 auto;padding-top: 20px;}
        .lg_logo{float: left;padding: 0 15px 0 0}
        .lg_phone{float: right;margin: 30px 0 0;color: #ffffff;padding-right: 25px}
        #contentBoxmain{
            background-image: url(http://www.shumasheying.org.cn/themes/index/public/assets/images/deng_bg.jpg);
            min-width: 1280px;
            background-size: 100% 700px;
            background-repeat: no-repeat;
            height: 100%;
            width: 100%;

        }
        .content_Bn{

            width: 1280px;height: 655px;margin: 0 auto;top: 15px;position: relative;

        }
        .zcbox{width: 500px;height: 623px;background-color: #2e2e2e;opacity: 0.7;border: 1px solid #ebf0f2;text-align: left;margin-left: 380px;margin-right: 0;position: relative;}
        .zc_tab{width: 500px;height: 53px;border-bottom: 5px solid #008855;}
        .on{color: #008855;height: 49px;display: block;width: 500px;text-align: center;font-size: 38px;}
        .zcbox_main{padding: 20px;position: relative;}
        .RegForm{width: 500px;height: 630px;}
        .zcbox_main>ul{width: 460px;height: 320px;padding-left: 0;margin: 0;list-style-type: none;}
        .zcbox_main li>span{color: #ffffff;font-size: 16px;}
        .zcbox li {height: 40px;padding-top: 20px;position: relative;/*padding-top: 10px;*/}
        .zcbox_main li span.rt {width: 360px;text-align: left;}
        .zcbox_main span{width: 89px;height: 40px;line-height: 40px;float: left;text-align: right;padding-right: 5px;}
        .input{border: 1px solid #d7d7d6;height: 38px;font-size: 14px;width: 280px;padding: 0 20px;outline: none;}
        .zcbox .yzm input {width: 112px;padding: 0 20px;vertical-align: middle;margin-right: 10px;}
        .yzm img {display: inline-block;border: 1px solid #efefef;vertical-align: middle;margin: 0 10px 0 0;}
        .wjma{line-height: 47px;height: 47px;clear: both;padding-right: 50px;}
        .wjma>label{float: right;color: #ffffff;line-height: 47px;}
        .lg_btn{height: 40px;background-color: #008857;color: #fff;font: 18px/40px "微软雅黑";text-align: center;border-radius: 3px;display: block;margin-left: 94px;width: 320px;}
        .lg_zc {width: 415px;height: 50px;text-align: right;display: block;line-height: 50px;font-size: 16px;color: #ffffff;margin-bottom: 40px;margin-right: 45px;}
        footer{flex: 0 0 auto;min-width: 100%;background: #2e2e2e;color: #ffffff;}
        .f-container {width: 1280px;height: 350px;margin: auto;padding: 0;}
        .ftt{border-bottom: 1px solid #666666;width: 1280px;height: 320px;padding-left: 0;}
        footer .ftt .lianxi {width: 325px;margin-bottom: 45px;margin-right: 130px;}
        .fy{float: left;}
        .fr{float: right;}
        footer .ftt .lianxi h3 {margin-bottom: 20px;font-size: 16px;color: #fff;font-weight: 300;border-bottom: 1px solid #fff;padding-bottom: 5px;}
        .pc{border: 0;background-color: #2e2e2e;color: #ffffff;padding: 0;}
        footer .ftt .daohang {width: 340px;}
        footer .ftt .daohang h3 {margin-bottom: 20px;font-size: 16px;color: #fff;font-weight: 300;border-bottom: 1px solid #fff;padding-bottom: 5px;}
        footer .ftt .daohang li a {display: block;color: #fff;text-decoration: none;font-size: 14px;width: 100%;}
        .f-ul{padding: 0;list-style-type: none;}
        .f-ul>li{width: 85px;text-align: left;float: left;margin-bottom: 15px;}
        footer .ftt .erwei {width: 325px;margin-top: 20px;padding-top: 50px;}
        footer .ftt .erwei img:nth-of-type(1) {margin-right: 60px;}
        footer .ftt .erwei img {border-radius: 5px;}
        footer .footer-bottom {margin-top: 18px;}
        footer .footer-bottom p{text-align: center;}
        footer .footer-bottom p span {margin-left: 34px;}
        .gender{color: #ffffff;font-size: 14px;}
    </style>
</head>
<body>
<div class="header">
    <div class="warp">
        <span class="lg_logo">
           <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png" alt="春秋旅游网">
        </span>
        <span class="lg_phone">
            电  话：010-52638701  0372-3668876
        </span>
    </div>
</div>
<section id="contentBoxmain">
    <div class="content_Bn">
        <div class="zcbox" id="app">
            <div id="error" class="alert alert-danger"
                 style="display: none"
                 :class="{'d-block':hasError}">
                <i class="fa fa-exclamation-triangle"></i>
                <span v-text="message" >用户名已存在!</span>
            </div>
            <form class="RegForm" action="/register" method="post">
                <div class="zc_tab">
                    <span class="on" >
                        注册
                    </span>
                </div>
                <div class="zcbox_main">
                    <ul>
                        <li>
                            <span>用户名:</span>
                            <span class="rt">
                                <input class="input" type="text" name="username"  placeholder="手机号/邮箱">
                            </span>

                        </li>
                        <li>
                            <span>昵称:</span>
                            <span class="rt">
                                <input class="input" type="text" name="nickname" placeholder="昵称">
                            </span>
                        </li>
                        <li>
                            <span>年龄:</span>
                            <span class="rt">
                               <input class="input" type="text" name="age" placeholder="年龄">
                            </span>
                        </li>
                        <li>
                            <span>密码:</span>
                            <span class="rt">
                                <input class="input" type="password" name="password" placeholder="8-16个字符">
                            </span>
                        </li>
                        <li>
                            <span>请确认密码:</span>
                            <span class="rt">
                                <input class="input" type="password" name="password" placeholder="请再次确认密码">
                            </span>
                        </li>
                        <li>
                            <span>性别:</span>
                            <span>
                                <input id="r1" type="radio" name="gender" value="m">
                            <label class="gender" for="r1">男</label>
                            <input id="r2" type="radio" checked name="gender" value="w">
                            <label class="gender" for="r2">女</label><br>
                            </span>

                        </li>
                    </ul>
                    <div class="wjma">
                        <label>
                            注册即代表您已阅读并接受
                        </label>
                    </div>
                    <input class="input lg_btn " type="submit" value="注册" @click="reg()">
                    <span style="width: 410px;" class="lg_zc">已经注册？
                        <a style="text-decoration: none;color: #ff6600" href="http://localhost:8080/login.html">马上登录</a></span>
                </div>
                <div></div>
            </form>
        </div>
    </div>
</section>
<footer >
    <div class="f-container">
        <div class="ftt ">
            <div class="lianxi fy">
                <h3>联系我们</h3>
                <p>北京总部</p>
                <p>地  址：北京市石景山区阜石路166号泽洋大厦713室</p>
                <p>邮  编：100001</p>
                <!--<pre class="pc">电  话：010-52638701 010-52638749  0372-3668876</pre>-->
                <p>E-mail：xinshidaisheyingjia2018@aliyun.com</p>
                <p>安阳分社</p>
                <p>地  址：河南省安阳市万达广场SOHO公寓B座</p>

                <pre class="pc">电  话：0372-5023007  0372-3978876</pre>

            </div>
            <div class="daohang fy">
                <h3>网站导航</h3>
                <ul class="clearfix f-ul">
                    <li class="fl"><a href="/">首页</a></li>
                    <li class="fl"><a href="/activity.html">摄影赛事</a></li>
                    <li class="fl"><a href="/reflex.html">热门影展</a></li>
                    <li class="fl"><a href="/magazine.html">摄影杂志</a></li>
                    <li class="fl"><a href="http://www.sheyingyou.cn/">摄影旅游</a></li>
                    <li class="fl"><a href="/creation.html">用品超市</a></li>
                    <li class="fl"><a href="Javascript:;">资讯动态</a></li>
                    <li class="fl"><a href="Javascript:;">作品&amp;影展</a></li>
                    <li class="fl"><a href="Javascript:;">全国理事会</a></li>
                    <li class="fl"><a href="Javascript:;">会员服务</a></li>
                    <li class="fl"><a href="Javascript:;">关于我们</a></li>
                    <li class="fl"><a href="/sitemap.html">网站地图</a></li>
                </ul>
            </div>
            <div class="erwei fr">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/934b656b7173258b84a6c0af2fd940da.jpg">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/dabcf8c159d41ed632d0e89f46179016.jpg">
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p>版权所有 Copyright © 2019 北京天之星文化传媒中心 All Rights Reserved <span>备案序号：<a href="https://beian.miit.gov.cn/" style="color:white;">京ICP备13014113号-4</a></span><span></span> </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <div style="position: fixed; z-index: 99999; top: 20%; right: 20px;">
        <!-- <a href="http://www.shumasheying.org.cn/celebrity%20interview/977.html"> -->
        <a href="http://www.shumasheying.org.cn/creation.html">
            <img src="/themes/index/public/assets/images/right117.jpg" alt="">
        </a>
    </div>
    <div style="position: fixed; z-index: 99999; top: 20%; left: 20px;">
        <a href="http://www.shumasheying.org.cn/reflex/2440.html">
            <img src="/themes/index/public/assets/images/left117.jpg" alt="">
        </a>
    </div>
</footer>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</body>
</html>